<template>
  <div class="item" style="height: 100% ; width: 100%">
    <div id="myEcharts" :style="{ width: '100%', height: '100%' }"></div>
  </div>
</template>

<script>
import request from "@/util/request.js";
import * as echarts from "echarts";

export default {
  name: "Pie",
  data() {
    return {
      chartInstance: null,
      echart: echarts,
      title: '总量',
      allAwardCount: 1,
      awardData: [],
      option: {},
      resizeTimer: null // 定时器
    };
  },
  mounted() {
    this.getAwardData();
    this.initChart();
    this.getData();
    window.addEventListener("resize", this.handleResizeEnd);
  },
  beforeUnmount() {
    window.removeEventListener("resize", this.handleResizeEnd);
  },
  watch: {
    data() {
      this.getData();
    }
  },
  methods: {
    getAwardData() {
      request.get("/info_award/count").then(res => {
        this.awardData.push(...res.data.data);
        this.allAwardCount = parseInt(res.data.message);
        this.updateData();
      });
    },
    initChart() {
      this.chartInstance = this.echart.init(document.getElementById("myEcharts"));
    },
    async getData() {
      await this.updateData();
    },
    updateData() {
      this.option = {
        tooltip: {
          trigger: 'item'
        },
        title: {
          total: 0,
          text: '{name|' + this.title + '}\n{val|' + this.allAwardCount + '}',
          top: 'center',
          left: 'center',
          textStyle: {
            rich: {
              name: {
                fontSize: 14,
                fontWeight: 'normal',
                color: '#666666',
                padding: [10, 0]
              },
              val: {
                fontSize: 32,
                fontWeight: 'bold',
                color: '#333333',
              }
            }
          }
        },
        legend: {
          top: '0%',
          left: 'top'
        },
        grid: {
          top: "50px",
          left: "5px",
          right: "5px",
          bottom: "50px",
        },
        series: [{
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: true,
            position: 'top'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 20,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: true
          },
          data: this.awardData
        }]
      };
      this.chartInstance.setOption(this.option, true);
    },
    handleResizeEnd() {
      clearTimeout(this.resizeTimer);
      this.resizeTimer = setTimeout(() => {
        this.chartInstance.resize();
        this.updateFontSize(); // 调整文字大小等
      }, 500); // 设置延迟时间，500ms
    },
    updateFontSize() {
      // 根据图表宽度调整文字大小等
      const width = this.chartInstance.getWidth();
      // 这里根据需要进行文字大小的调整
    }
  },
};
</script>

<style scoped>

</style>
